<template>
  <div class="w-full">
    <q-toolbar class="min-h-40px q-gutter-x-sm">
      <div class="">{{ 父插组件.成标题(父字段) }}:</div>
      <template v-if="!禁止增删">
        <el-button type="primary" icon="plus" @click="加一行()" plain size="small">加一行</el-button>
      </template>
    </q-toolbar>
    <el-table ref="表ref" style="width: 100%" tooltip-effect="dark" :data="单项组" row-key="id" border
      :onHeaderDragend="列宽拖动">
      <!-- <el-table-column align="left" label="编号" width="80" v-if="!禁止详情链接">
        <template #default="{ row: 单项 }">
          <el-button type="primary" link icon="link" @click="父插组件.跳转单独详情页(单项, 父字段.名称)">{{ 单项.编号
          }}</el-button>
        </template>
      </el-table-column> -->

      <template v-for="字段 in 显示字段组" :key="字段.名称">
        <a列表字段 :插组件="插组件" :字段="字段" :编辑否="编辑否" :父环境="父环境" />
      </template>

      <el-table-column align="left" label="操作" fixed="right" v-if="!禁止增删">
        <template #default="scope">
          <el-button type="danger" link icon="delete" @click="删行(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import *  as util from '@/utils'
import * as 插组件util from 'amtf/api/插组件util';

import * as em from '@/enums';

import a列表字段 from '@/components/a列表字段.vue';
const props = withDefaults(defineProps<{
  父字段: 字段;
  父插组件: 插组件;
  指定字段名组?: string[];
  父单项: 单项;
  父环境: string;
  编辑否?: boolean;
  cfg?: cfg;
}>(),
  {
    编辑否: false
  });
const { cfg, 父环境, 父字段 } = props

let 显示设置 = 插组件util.取子表显示设置(父字段, 父环境)
// switch (父环境) {
//   case '独立详情':
//     if (父字段.子表显示设置_独立详情) {
//       显示设置 = 父字段.子表显示设置_独立详情
//     }
//     break;
//   case '简化详情':
//     if (父字段.子表显示设置_简化详情) {
//       显示设置 = 父字段.子表显示设置_简化详情
//     }
//     break;
//   case '父表内嵌':
//     if (父字段.子表显示设置_父表内嵌) {
//       显示设置 = 父字段.子表显示设置_父表内嵌
//     }
//     break;
// }

import use插组件 from "@/hooks/use插组件"
// console.log(`props.父字段.关联组件 👉`, props.父字段.关联组件)
const 组件id = props.父插组件.成组件id(props.父字段.关联组件)
// const 插组件 = use插组件({ 组件id, 指定字段名组: props.指定字段名组 })
const 插组件 = use插组件({ 组件id })

const 表ref = ref()
import use缓存 from "@/hooks/use缓存"
const 缓存 = use缓存({ ...插组件.a })
function 列宽拖动(newWidth: number, oldWidth: number, column: any, event: MouseEvent) {
  // console.log(`表ref 👉`, 表ref)
  const 列s = 表ref.value.columns as any[]
  缓存.存列宽(列s)
}

// const {单项组} = props.父单项[props.父字段.名称];
const 单项组 = reactive(props.父单项[props.父字段.名称]);
// watch(props.父单项, (newValue, oldValue) => {
//   console.log(`子表监听到 props.父单项 变化了👉`, props.父单项)
// })

// const 子表 = use子表({ 父组件: props.父组件, 单项组, 单项模板 })
const 拟删除子表ids = props.父单项[props.父字段.名称 + "_拟删除子表ids"]

function 加一行() {
  console.log(`加一行 插组件 👉`, 插组件)
  const 单项模板 = 插组件.取组件单项模板()
  console.log(`单项模板 👉`, 单项模板)
  // 单项模板.id = '临时id' + Date.now()
  // 单项模板.id = Date.now() * -1
  // 单项组.unshift(util.深拷贝(单项模板))
  if (cfg?.事件hook集?.新增前) {
    cfg?.事件hook集?.新增前(单项模板)
  }
  单项组.unshift(单项模板)
}

const 删行 = (单项: 单项) => {
  // const index = 单项组.indexOf(row);
  // if (index !== -1) 单项组.splice(index, 1);
  let id = 单项.id
  util.删除元素(单项组, 单项)
  if (id) {
    // 拟删除子表ids[id] = ''
    util.添加非重复元素(拟删除子表ids, id)
  }
  console.log(`拟删除子表ids 👉`, 拟删除子表ids)
}

const 禁止增删 = computed(() => {
  if (cfg?.禁止增删 == false) {
    return false
  }
  // console.log(`props.父字段.显示设置 👉`, props.父字段.显示设置)
  if (显示设置?.禁止增删) {
    // console.log(`props.父字段.显示设置?.禁止增删 👉`, props.父字段.显示设置?.禁止增删)
    return true
  }
  return false
})

const 禁止详情链接 = computed(() => {
  if (cfg?.禁止详情链接) {
    return true
  }
  if (显示设置?.禁止详情链接) {
    return true
  }
  return false
})

const 显示字段组 = computed(() => {
  let res = 插组件.筛选子表字段(显示设置.指定显示字段组)
  // console.log(`显示字段组 res 👉`,res)
  return res
})


</script>

<style scoped>
:deep(.el-table .el-table__cell) {
  z-index: auto;
}
</style>
